﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>硅谷PSS进销存系统</title>
    <style type="text/css">
        /*设置下拉框 往上弹出*/
        .selectUp .layui-form-select dl {
            top: auto;
            bottom: 38px;
        }
        /*弹窗中 Select 被遮盖问题*/
        .layui-layer.layui-layer-page .layui-layer-content {
            overflow: visible;
        }
    </style>
</head>
<body>
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header layui-bg-cyan">
            <div class="layui-logo">
                <img style="height:40px;" src="~/img/logo.png" />
                小饼干进销存管理
            </div>
            <!-- 头部区域 -->
            <ul class="layui-nav layui-layout-left">
                <li class="layui-nav-item"><a href="">首 页</a></li>
                <li class="layui-nav-item"><a href="">工作内容</a></li>
                <li class="layui-nav-item"><a href="">月度总结</a></li>
                <li class="layui-nav-item">
                    <a href="javascript:;">站内消息</a>
                    <dl class="layui-nav-child">
                        <dd><a href="">系统消息 <span class="layui-badge-dot"></span></a></dd>
                        <dd><a href="">私信<span class="layui-badge-dot"></span></a></dd>
                        <dd><a href="">代办事宜</a></dd>
                    </dl>
                </li>
            </ul>
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item">
                    <a href="javascript:;">
                        <img id="headimg" src="@Session["headImg"]" class="layui-nav-img">
                        @Session["name"]
                    </a>
                    <dl class="layui-nav-child">
                        <dd><a href=""><i class="layui-icon layui-icon-username"></i> 个人中心</a></dd>
                        <dd><a href="JavaScript:SignOut();"><i class="layui-icon layui-icon-export"></i> 切换用户</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="JavaScript:SignOut();">退出登录</a></li>
            </ul>
        </div>

        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <!-- 左侧导航区域 -->
                <ul id="menusbox" class="layui-nav layui-nav-tree" lay-shrink="all" lay-filter="test">
                </ul>
            </div>
        </div>

        <div class="layui-body">
            <!-- 内容主体区域  layui-tab-brief -->
            <div class="layui-tab " lay-allowClose="true" lay-filter="page_tab" style="margin:0px;">
                <ul class="layui-tab-title">
                </ul>
                <div class="layui-tab-content">
                </div>
            </div>
        </div>

        <div class="layui-footer">
            <!-- 底部固定区域 -->
            © 2021- 硅谷PSS进销存系统 || 硅谷PSS进销存系统版权所有
        </div>
    </div>

    <script type="text/html" id="tpmenu">
        {{# layui.each(d, function(i, m){ }}
        {{# if(m.parentID==0){ }}
        <li class="layui-nav-item">
            <a href="javascript:;">{{ m.menuName }}</a>
            <dl class="layui-nav-child">
                {{#  layui.each(d, function(ii, mm){ }}
                {{# if(mm.parentID==m.menuID){ }}
                <dd lay-id="{{mm.a_Id}}"><a href="javascript:OpenTab({{mm.a_Id}},'{{mm.menuName}}','{{mm.areaName}}','{{mm.controllerName}}','{{mm.actionName}}');">{{ mm.menuName }}</a></dd>
                {{#  } }}
                {{#  }); }}
            </dl>
        </li>
        {{#  } }}
        {{#  }); }}
    </script>
    <script type="text/javascript">
        
        var element, layer, form, laydate, formdata;

        layui.use(['element', 'laytpl', 'layer', 'form','laydate'], function () {
            element = layui.element;
            laytpl = layui.laytpl;
            layer = layui.layer;
            form = layui.form;
            laydate = layui.laydate;

            // 校验两次密码是否一致
            form.verify({
                contrastPass: function (value) {
                    if ($('input[name=pwd]').val() == value)
                        return '新旧密码不能一致！';
                },
                confirmPass: function (value) {
                    if ($('input[name=newpwd]').val() !== value)
                        return '两次密码输入不一致！';
                }
            });

            //加载菜单
            $.post("/Manage/GetMenus", function (data) {
                var d = JSON.parse(data);
                //console.log(d);
                //使用模板渲染出菜单
                var getTpl = tpmenu.innerHTML
                    , view = document.getElementById('menusbox');
                laytpl(getTpl).render(d, function (html) {
                    view.innerHTML = html;
                    element.render(); //重新渲染
                });
            });

            //Tab  切换事件
            element.on('tab(page_tab)', function (data) {
                let myiframe = $(data.elem).find(".layui-show iframe");
                if (myiframe.attr('src').length < 1) {
                    var index = layer.load();
                     //强制切换刷新
                    myiframe.attr('src', myiframe.data('url'));
                }
                myiframe.on("load", function () {
                    layer.close(index);
                })

                //获取当前Tab页的 layid
                let layid = $(this).attr("lay-id"); 

                //切换左边菜单选中
                $("#menusbox dd").each(function (i, o) {
                    if ($(o).attr("lay-id") == layid) {
                        $(o).addClass("layui-this").siblings().removeClass("layui-this").parent().parent().addClass("layui-nav-itemed")
                            .siblings().removeClass("layui-nav-itemed").find("dd").removeClass("layui-this");
                        
                    }
                })
            });

        });

        //打开选项卡
        function OpenTab(id, name, area, contro, action) {
            var isData = false; //记录是否已经存在 Tab页
            $.each($(".layui-tab-title li[lay-id]"), function () {
                if ($(this).attr("lay-id") == id) {
                    isData = true;
                }
            })
            if (!isData) {  //没有就添加一个新Tab页
                //添加新的选项卡
                element.tabAdd('page_tab', {
                    title: name
                    , content: '<iframe data-frameid="' + id + '" data-url="/' + area + "/" + contro + "/" + action + '" scrolling="auto" frameborder="0" src style="width:100%;height:90%;"></iframe>'
                    , id: id
                });
                FrameWH();
            }
            //切换到选项卡
            element.tabChange("page_tab", id);
          
        }

        //主内容 iframe 高度适应
        function FrameWH() {
            var h = $(".layui-body")[0].scrollHeight - $(".layui-tab-title")[0].scrollHeight-20-2;
            //console.log(h);
            $("iframe").css("height", h + "px");
        }

        $(window).resize(function () {
            FrameWH();
        })

        //删除当前选项卡
        function DelTab() {
            var layid = $(".layui-tab .layui-this").attr("lay-id");
            element.tabDelete("page_tab", layid);
        }

        //退出登录
        function SignOut() {
            $.post("/Manage/SignOut", function (data) {
                var d = JSON.parse(data);
                if (d.code > 0) {
                    layer.msg(d.msg);
                    location.href = "/Manage/Login";
                } else {
                    layer.msg(d.msg);
                }
            });
        }
    </script>
</body>
</html>
